<template>
  <div>
    <h1>权限管理示例</h1>
    <!-- 客房管理权限 -->
    <div>
      <h2>客房管理</h2>
      <button v-if="hasPermission('viewRoomInfo')" @click="viewRoomInfo">查看客房信息</button>
      <button v-if="hasPermission('addNewRoom')" @click="addNewRoom">添加新客房</button>
      <button v-if="hasPermission('updateRoomStatus')" @click="updateRoomStatus">修改客房状态</button>
      <button v-if="hasPermission('deleteRoom')" @click="deleteRoom">删除客房</button>
    </div>
    <!-- 客户管理权限 -->
    <div>
      <h2>客户管理</h2>
      <button v-if="hasPermission('viewCustomerInfo')" @click="viewCustomerInfo">查看客户信息</button>
      <button v-if="hasPermission('addNewCustomer')" @click="addNewCustomer">添加新客户</button>
      <button v-if="hasPermission('updateCustomerInfo')" @click="updateCustomerInfo">修改客户信息</button>
      <button v-if="hasPermission('deleteCustomer')" @click="deleteCustomer">删除客户</button>
    </div>
    <!-- 预订管理权限 -->
    <div>
      <h2>预订管理</h2>
      <button v-if="hasPermission('viewReservationInfo')" @click="viewReservationInfo">查看预订信息</button>
      <button v-if="hasPermission('makeReservation')" @click="makeReservation">进行预订操作</button>
      <button v-if="hasPermission('updateReservation')" @click="updateReservation">修改预订信息</button>
      <button v-if="hasPermission('cancelReservation')" @click="cancelReservation">取消预订</button>
    </div>
    <!-- 财务管理权限 -->
    <div>
      <h2>财务管理</h2>
      <button v-if="hasPermission('viewFinancialReport')" @click="viewFinancialReport">查看财务报表</button>
      <button v-if="hasPermission('processBill')" @click="processBill">处理账单</button>
      <button v-if="hasPermission('settleExpenses')" @click="settleExpenses">进行费用结算</button>
    </div>
    <!-- 员工管理权限 -->
    <div>
      <h2>员工管理</h2>
      <button v-if="hasPermission('viewEmployeeInfo')" @click="viewEmployeeInfo">查看员工信息</button>
      <button v-if="hasPermission('addNewEmployee')" @click="addNewEmployee">添加新员工</button>
      <button v-if="hasPermission('updateEmployeeInfo')" @click="updateEmployeeInfo">修改员工信息</button>
      <button v-if="hasPermission('deleteEmployee')" @click="deleteEmployee">删除员工</button>
      <button v-if="hasPermission('assignEmployeeRole')" @click="assignEmployeeRole">分配员工角色</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AuthList',
  data() {
    return {
      // 模拟用户角色
      userRole: '前台接待员',
      // 模拟角色权限映射
      rolePermissions: {
        '前台接待员': [
          'viewRoomInfo',
          'updateRoomStatus',
          'viewCustomerInfo',
          'viewReservationInfo',
          'makeReservation',
          'updateReservation',
          'cancelReservation'
        ],
        '客房管理员': [
          'viewRoomInfo',
          'addNewRoom',
          'updateRoomStatus',
          'deleteRoom'
        ],
        '财务人员': [
          'viewFinancialReport',
          'processBill',
          'settleExpenses'
        ],
        '人力资源人员': [
          'viewEmployeeInfo',
          'addNewEmployee',
          'updateEmployeeInfo',
          'deleteEmployee',
          'assignEmployeeRole'
        ]
      }
    };
  },
  methods: {
    hasPermission(permission) {
      return this.rolePermissions[this.userRole].includes(permission);
    },
    viewRoomInfo() {
      console.log('查看客房信息');
    },
    addNewRoom() {
      console.log('添加新客房');
    },
    updateRoomStatus() {
      console.log('修改客房状态');
    },
    deleteRoom() {
      console.log('删除客房');
    },
    viewCustomerInfo() {
      console.log('查看客户信息');
    },
    addNewCustomer() {
      console.log('添加新客户');
    },
    updateCustomerInfo() {
      console.log('修改客户信息');
    },
    deleteCustomer() {
      console.log('删除客户');
    },
    viewReservationInfo() {
      console.log('查看预订信息');
    },
    makeReservation() {
      console.log('进行预订操作');
    },
    updateReservation() {
      console.log('修改预订信息');
    },
    cancelReservation() {
      console.log('取消预订');
    },
    viewFinancialReport() {
      console.log('查看财务报表');
    },
    processBill() {
      console.log('处理账单');
    },
    settleExpenses() {
      console.log('进行费用结算');
    },
    viewEmployeeInfo() {
      console.log('查看员工信息');
    },
    addNewEmployee() {
      console.log('添加新员工');
    },
    updateEmployeeInfo() {
      console.log('修改员工信息');
    },
    deleteEmployee() {
      console.log('删除员工');
    },
    assignEmployeeRole() {
      console.log('分配员工角色');
    }
  }
};
</script>

<style scoped>
h2 {
  margin-top: 20px;
}

button {
  margin: 5px;
  padding: 5px 10px;
}
</style>